<template>
  <div class="home">
    <van-tabs v-model="active">
      <van-tab title="提醒">
        <div class="msg-wrap">
           
          <div class="msg-nav">
            <div class="msg-nav-item">
              <router-link to="/fans">
              <div class="icon">
                <img src="../assets/img/fans.png" alt="" />
              </div>
              <p>粉丝/好友</p>
              </router-link>
            </div>
            <div class="msg-nav-item">
              <div class="icon"><img src="../assets/img/at.png" alt="" /></div>
              <p>@我的</p>
            </div>
            <div class="msg-nav-item">
              <div class="icon">
                <img src="../assets/img/pinglun.png" alt="" />
              </div>
              <p>通知</p>
            </div>
          </div>
           
        </div>
        <div class="gap"></div>

        <div class="list" v-for="picture in pictures" :key="picture.id"   >
         
          <!--  系统动态 -->
          <van-swipe-cell v-if="picture.user_id!=user_id">
            <div class="dynamic">
              <img :src="picture.icon" alt="" />
              <p>您的关注<strong>{{picture.name}}</strong>更新啦~</p>
            </div>
            <div class="content">
              <p>{{picture.title}}</p>
              <img :src="picture.picture" alt="" />
            </div>
            <van-divider
              :style="{
                color: '#1989fa',
                borderColor: '#1989fa',
                padding: '0 16px',
              }"
            />
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </div>
      </van-tab>

      <van-tab title="私信">
        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <div >
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
           placement="bottom-start"
        >
          <template #reference style="width:100%">
            <div class="liaotian" v-for="item in userlist" :key="item.id" >
              <router-link tag="div"  :to="/chat/+item.id" >
              <img :src="item.icon" alt="" />
              <p class="yhname">{{item.name}}</p>
              <span class="lasttime">20:00</span>
              <span class="lastmsg">滴滴</span>
              </router-link>
            </div>
          </template>
         
        </van-popover>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 底部标签栏 -->
    <tab-btn></tab-btn>
  </div>
</template>

<script>
import axios from "axios";
import tabBtn from "../components/tabBtn";
export default {
  data() {
    return {
      active: 2,
      value: "",
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: "删除该私信" }, { text: "清空记录" }],
      userlist:[],
      pictures: [],
       lists:[],
       param:{
            "page": 0,
            "rows":4 ,
            "type_id":1,           
        },
        user_id:''
    };
  },
  components: {
    tabBtn,
  },
  //获取用户列表
  created() {
    axios.get("http://localhost:3000/userList")
      .then(res=>{
       this.userlist=res.data.data
      this.user_id=localStorage.getItem('user_id')
      });
      this.onLoad()
     
  },
  methods: {
    onSelect(action) {
      Toast(action.text);
    },
        onLoad(){
         axios.get('http://localhost:3000/news_picture',{
          params:this.param
        })
       .then((res) => {
         var pictures1=res.data.data.pictureList
          this.list=res.data.list
          pictures1.map(((value,index,array)=>
          {
          if(typeof this.pictures== "object"){
          this.pictures=array
          }  
          }))
     
      });
    
},
        
  },
};
</script>

<style lang="less" scoped>
/deep/ .home .van-ellipsis {
  font-size: 20px;
}
/deep/  .msg-warp {
  padding: 0 20px;
  color: #ffffff;
  background-color: #101821;

  height: 1000px;
}
/deep/.msg-nav {
  padding: 20px 10px;
  display: flex;
  justify-content: space-around;
}
/deep/ .msg-nav-item {
  text-align: center;
  width: 60px;
  p {
  font-size: 12px;
}
.icon img {
  height: 30px;
  width: 30px;
  border-radius: 5px;
  margin-bottom: 5px;
  } 
}

/deep/ .van-popover__wrapper{
  width: 100%;
}
.gap {
  height: 5px;
  background: #dcdee0;
}
.dynamic {
  margin: 5px;
  background-color: white;
   p {
  position: absolute;
  top: -10px;
  left: 60px;
}
:first-child {
  border-radius: 50%;
  width: 10%;
  }
  strong{
  color: #94bce6;
 }
}
.content{
  p{
  margin-inline-start: 4em;
  margin-block-start: -1em;
  }
  img {
  width: 80px;
  margin-inline-start: 4em;
  margin-block-start: -1em;
  }
} 
.delete-button {
  height: 100%;
}
.list {
  margin-bottom: 35px;
}
.liaotian {
  margin: 10px;
  margin-bottom: 30px;
  img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
}
.yhname{
    margin-block-start: -50px;
    margin-inline-start: 70px;
}
.lasttime{
  color: #c8c9cc;
   float: right;
    margin-top: -35px;
}
.lastmsg{
    font-size: 12px;
    color: #969799;
    margin-inline-start: 70px;
}
</style>
